<style>
	.page{
		border-top: 2rpx solid #eee;
	}
    .g-container {
        padding: 10px;
        background: #fff;
        box-sizing: border-box;
    }
    .g-container2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .g-input {
        display: flex;
        align-items: center;
        position: relative;
    }
    .g-input text { width: 140upx}
    .g-input input {flex: 1; height: 36upx;}
    .f-border1px {border-bottom: 1px solid #f5f5f5;position: relative;}

    .textarea {
        width: 100%;
        height: 200upx;
        margin-bottom: 10px;
    }
	.submit-box {
		text-align: center;
		padding-bottom: 40rpx;
	}
	.submit {
		background: #bea374;
		display: inline-block;
		border-radius: 0.15rem;
		width: 15rem;
		height: 78rpx;
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		font-size: 28rpx;
		margin-top: 42rpx;
	}
</style>
<template>
    <view class="page">
        <view class="g-input f-border1px g-container ">
            <text>联系人</text>
            <input type="text" v-model="data.realname">
        </view>
        <view class="g-input f-border1px g-container ">
            <text>联系电话</text>
            <input type="number" v-model="data.mobile">
        </view>
        <view class="g-container2 g-container f-border1px" @tap="showMulLinkageThreePicker">
            <text>所在地区</text>
            <view class="g-container2">
                <text>{{addressText}}</text>
                <view>
                    <arrow color="#ccc" size="40" direction="right"></arrow>
                </view>
            </view>
        </view>
        <textarea class="textarea g-container" v-model="data.address"></textarea>
        <!-- 地址框 -->
        <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
        <view class="m-loading" v-if="isShowLoading">
            <image src="@/static/images/loading.gif" mode="widthFix"></image>
            <text>加载中</text>
        </view>
		<view class="submit-box" @tap="post"><view class="submit">提交</view></view>
    </view>
</template>
<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
    import area from '@/components/mpvue-citypicker/city-data/area.js';
    import city from '@/components/mpvue-citypicker/city-data/city.js';
    import province from '@/components/mpvue-citypicker/city-data/province.js';
	import henglang from '@/common/common_zb.js';
	
    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {
                themeColor: '#007AFF',
                addressText: '点击选择',
                isShowLoading: false,
                data: { // 提交的数据
                    realname: '',
                    mobile: '',
                    address: '',
                },
				cityPickerValueDefault:[0,0,0],
				order_id: 0,	// 订单id
            };
        },
        methods: {
            // 三级联动选择
            showMulLinkageThreePicker() {
                this.$refs.mpvueCityPicker.show();
            },
            onConfirm(e) {
                let val = e.value;
                this.addressText = e.label.replace(/-/g, ' ');
				let addressArray = e.label.split('-');
                this.data.province = province[val[0]].value;
                this.data.city = city[val[0]][val[1]].value;
                this.data.zone = area[val[0]][val[1]][val[2]].value;
				this.data.addressData.province_text = addressArray[0];
				this.data.addressData.city_text = addressArray[1];
				this.data.addressData.zone_text = addressArray[2];
            },
			post() {
			    let that = this;
				if (!this.data.realname) {
					henglang.showToast('请输入正确的姓名');
					return;
				}
				if (!henglang.checkPhone(this.data.mobile)) {
					henglang.showToast('请输入正确的手机号码');
					return;
				}
				if (this.data.address == "点击选择") {
					henglang.showToast('请选择正确的地址');
					return;
				}
				if (!this.data.address) {
					henglang.showToast('请选择输入的详细地址');
					return;
				}
				let data = this.data;
				let url = this.build_url(data);
				uni.navigateTo({
					url: url
				})
			},
			build_url(options){
				let param = '';
				let url = '/pages/jewel/order/order_apply?';
				for (let i in options) {
					if(typeof options[i] == 'object') {
						for (let k in options[i]) {
							if(k == 'address') continue;
							param += k + '=' + options[i][k] + '&';
						}
					}else{
						param += i + '=' + options[i] + '&';
					}
				}
				return url + param;
			},
			// 获取省份index
			get_province_index(province){
				province.forEach(function(item,index){
					if(item.value == resdata.province){
						return index;
					}
				});
			},
			// 获取城市index
			get_city_index(province_id, city_id, zone_id){
				let province_index = 0,city_index = 0,area_index = 0;
				province.forEach(function(item,index){
					if(item.value == province_id){
						province_index = index;
						return 
					}
				});
				city[province_index].forEach(function(item,index){
					if(item.value == city_id){
						city_index = index;
						return false;
					}
				});
				area[province_index][city_index].forEach(function(item,index){
					if(item.value == zone_id){
						area_index = index;
						return false;
					}
				});
				return [province_index,city_index,area_index];
			}
        },
        onLoad(options) {
            let that = this;
			that.order_id = options.order_id;
			if(options.province != undefined) {
				that.data.mobile = options.mobile;
				that.data.realname = options.realname;
				that.data.address = options.address;
				that.data.province = options.province;
				that.data.city = options.city;
				that.data.zone = options.zone;
				let addressData = {
					province_text: options.province_text,
					city_text: options.city_text,
					zone_text: options.zone_text,
				};
				that.data.addressData = addressData;
				that.addressText = options.province_text  +' '+ options.city_text +' '+ options.zone_text;
				that.cityPickerValueDefault = that.get_city_index(options.province, options.city, options.zone);
				that.data.options = options;
				that.build_url(that.data);
			}else{
				henglang.get('order/apply_edit_address',{order_id: that.order_id}, true, function(res){
					let resdata = res.data.data;
					that.data = resdata;
					that.data.options = options;
					that.build_url(that.data);
					that.addressText = resdata.addressData.province_text +' '+ resdata.addressData.city_text +' '+ resdata.addressData.zone_text;
					that.cityPickerValueDefault = that.get_city_index(resdata.province, resdata.city, resdata.zone);
				});
			}
        }
    }
</script>
